<template>
  <div>
    <h2>{{ isNew ? '新建任务' : '编辑任务' }}</h2>
    <form @submit.prevent="submit">
      <div>
        <label>名称</label>
        <input v-model="form.name" required />
      </div>
      <div>
        <label>方向</label>
        <select v-model="form.direction">
          <option value="KAFKA_TO_RABBIT">Kafka → RabbitMQ</option>
          <option value="RABBIT_TO_KAFKA">RabbitMQ → Kafka</option>
        </select>
      </div>

      <div v-if="form.direction==='KAFKA_TO_RABBIT'">
        <h3>Kafka 源</h3>
        <input v-model="form.kafkaSourceBootstrap" placeholder="192.168.168.23:9092" />
        <input v-model="form.kafkaSourceTopic" placeholder="源topic" />
        <input v-model="form.kafkaSourceGroup" placeholder="消费组" />
        <select v-model="form.kafkaSourceOffsetReset">
          <option value="latest">latest</option>
          <option value="earliest">earliest</option>
        </select>
        <h3>Rabbit 目标</h3>
        <input v-model="form.rabbitTargetHost" placeholder="192.168.168.23" />
        <input v-model.number="form.rabbitTargetPort" placeholder="5672" />
        <input v-model="form.rabbitTargetVhost" placeholder="/test" />
        <input v-model="form.rabbitTargetUsername" placeholder="guest" />
        <input v-model="form.rabbitTargetPassword" placeholder="guest" />
        <input v-model="form.rabbitTargetExchange" placeholder="目标 exchange" />
        <input v-model="form.rabbitTargetRoutingKey" placeholder="routingKey/队列名" />
      </div>

      <div v-else>
        <h3>Rabbit 源</h3>
        <input v-model="form.rabbitSourceHost" placeholder="192.168.168.23" />
        <input v-model.number="form.rabbitSourcePort" placeholder="5672" />
        <input v-model="form.rabbitSourceVhost" placeholder="/test" />
        <input v-model="form.rabbitSourceUsername" placeholder="guest" />
        <input v-model="form.rabbitSourcePassword" placeholder="guest" />
        <input v-model="form.rabbitSourceQueue" placeholder="源队列" />
        <input v-model.number="form.rabbitSourcePrefetch" placeholder="prefetch(可选)" />
        <h3>Kafka 目标</h3>
        <input v-model="form.kafkaTargetBootstrap" placeholder="192.168.168.23:9092" />
        <input v-model="form.kafkaTargetTopic" placeholder="目标topic" />
        <input v-model="form.kafkaTargetAcks" placeholder="all/1/0(默认all)" />
      </div>

      <div>
        <label>并发度</label>
        <input v-model.number="form.concurrency" type="number" min="1" placeholder="1" />
      </div>
      <div>
        <label>重试次数</label>
        <input v-model.number="form.maxRetries" type="number" min="0" placeholder="3" />
      </div>
      <div>
        <label>重试退避(ms)</label>
        <input v-model.number="form.retryBackoffMs" type="number" min="0" placeholder="1000" />
      </div>

      <button type="submit">保存</button>
    </form>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { onMounted, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const isNew = computed(() => route.params.id === undefined)

const form:any = reactive({
  name: '', direction: 'KAFKA_TO_RABBIT', enabled: true,
})

onMounted(async () => {
  if (!isNew.value) {
    const { data } = await axios.get('/api/tasks')
    const found = data.find((x:any) => String(x.id) === String(route.params.id))
    if (found) Object.assign(form, found)
  }
})

const submit = async () => {
  await axios.post('/api/tasks', form)
  router.push('/')
}
</script>

